Tengo un componente como este -->

 <form onSubmit={verifyOTP}> .... ..... <div className="auth-btn-wrap"> <button disabled={isLoading ? true : false} type="submit" className="btn btrimary"> {isLoading ? (<CircularProgress />) : (<>Verify OTP</>)}</button> {isLoading ? null : (<Link onClick={resendOTP}>Resend</Link>)} </div> <div id="recaptcha-container" /> </form>

La función de verificar OTP se ve así -->

 const verifyOTP = (e: React.SyntheticEvent) => { e.preventDefault(); if (window.confirmationResult) { window.confirmationResult .confirm(otp) .then(async () => { dispatch(signupStartStart({ user: { ...user, otp, otpConfirm: window.confirmationResult }, history })); }) .catch((e: any) => { console.error(e); snack.error("Invalid OTP"); }); } else { window.location.reload(); } };

En mi archivo de saga de usuario, la acción signupStartStart se ve así -->

 {....... ....... const result = yield call(sendOTPWithFb, { phoneNumber: user.countryCode + user.phoneNumber, containerName: "recaptcha-container" }); yield put (setLoading ({loading: false})); if (result) { yield put(showVerifyOTPSuccess()); snack.success('An OTP has been sent to you mobile'); } else { snack.error("Unable to send OTP"); } }

La función que envía OTP es esta -->

 export const sendOTPWithFb = async (data: any): Promise<boolean> => { const { phoneNumber, containerName } = data try { const appVerifier = new FirebaseTypes.auth.RecaptchaVerifier( containerName, { size: "invisible", } ); const confirmationResult = await firebase .auth() .signInWithPhoneNumber(`${phoneNumber}`, appVerifier); window.confirmationResult = confirmationResult; return true; } catch (error) { console.error(error); return false; } };

Cada vez que hago clic en el botón Reenviar OTP, aparece el error ---> "reCAPTCHA ya se ha renderizado en este elemento"

Por favor, hágame saber cómo resolver este problema.